diff --git a/puppetboard/app.py b/puppetboard/app.py
index 0ac6db7..141fe5f 100644
--- a/puppetboard/app.py
+++ b/puppetboard/app.py
@@ -1,313 +1,319 @@
 from __future__ import unicode_literals
 from __future__ import absolute_import
 
 import os
 import logging
 import collections
-import urllib
+try:
+    from urllib import unquote
+except ImportError:
+    from urllib.parse import unquote
 from datetime import datetime, timedelta
+from multiprocessing.dummy import Pool as ThreadPool 
 
 from flask import (
     Flask, render_template, abort, url_for,
     Response, stream_with_context, redirect,
     request
     )
 
 from pypuppetdb import connect
 
 from puppetboard.forms import QueryForm
 from puppetboard.utils import (
     get_or_abort, yield_or_stop,
     ten_reports, jsonprint
     )
 
 
 app = Flask(__name__)
 app.config.from_object('puppetboard.default_settings')
 app.config.from_envvar('PUPPETBOARD_SETTINGS', silent=True)
 app.secret_key = os.urandom(24)
 
 app.jinja_env.filters['jsonprint'] = jsonprint
 
 puppetdb = connect(
     api_version=3,
     host=app.config['PUPPETDB_HOST'],
     port=app.config['PUPPETDB_PORT'],
     ssl_verify=app.config['PUPPETDB_SSL_VERIFY'],
     ssl_key=app.config['PUPPETDB_KEY'],
     ssl_cert=app.config['PUPPETDB_CERT'],
     timeout=app.config['PUPPETDB_TIMEOUT'],)
 
 numeric_level = getattr(logging, app.config['LOGLEVEL'].upper(), None)
 if not isinstance(numeric_level, int):
         raise ValueError('Invalid log level: %s' % loglevel)
 logging.basicConfig(level=numeric_level)
 log = logging.getLogger(__name__)
 
 
 def stream_template(template_name, **context):
     app.update_template_context(context)
     t = app.jinja_env.get_template(template_name)
     rv = t.stream(context)
     rv.enable_buffering(5)
     return rv
 
 
 @app.errorhandler(400)
 def bad_request(e):
     return render_template('400.html'), 400
 
 
 @app.errorhandler(403)
 def bad_request(e):
     return render_template('403.html'), 400
 
 
 @app.errorhandler(404)
 def not_found(e):
     return render_template('404.html'), 404
 
 
 @app.errorhandler(412)
 def precond_failed(e):
     """We're slightly abusing 412 to handle missing features
     depending on the API version."""
     return render_template('412.html'), 412
 
 
 @app.errorhandler(500)
 def server_error(e):
     return render_template('500.html'), 500
 
 
 @app.route('/')
 def index():
     """This view generates the index page and displays a set of metrics and
     latest reports on nodes fetched from PuppetDB.
     """
     # TODO: Would be great if we could parallelize this somehow, doing these
     # requests in sequence is rather pointless.
     prefix = 'com.puppetlabs.puppetdb.query.population'
-    num_nodes = get_or_abort(
-        puppetdb.metric,
-        "{0}{1}".format(prefix, ':type=default,name=num-nodes'))
-    num_resources = get_or_abort(
-        puppetdb.metric,
-        "{0}{1}".format(prefix, ':type=default,name=num-resources'))
-    avg_resources_node = get_or_abort(
-        puppetdb.metric,
-        "{0}{1}".format(prefix, ':type=default,name=avg-resources-per-node'))
+    pool = ThreadPool()
+    endpoints = [
+                "{0}{1}".format(prefix, ':type=default,name=num-nodes'),
+                "{0}{1}".format(prefix, ':type=default,name=num-resources'),
+                "{0}{1}".format(prefix, ':type=default,name=avg-resources-per-node'),
+                ]
+    fetched_metrics = pool.map(puppetdb.metric, endpoints)
     metrics = {
-        'num_nodes': num_nodes['Value'],
-        'num_resources': num_resources['Value'],
-        'avg_resources_node': "{0:10.0f}".format(avg_resources_node['Value']),
+        'num_nodes': fetched_metrics[0]['Value'],
+        'num_resources': fetched_metrics[1]['Value'],
+        'avg_resources_node': "{0:10.0f}".format(fetched_metrics[2]['Value']),
         }
 
     nodes = puppetdb.nodes(
         unreported=app.config['UNRESPONSIVE_HOURS'],
         with_status=True)
 
     nodes_overview = []
     stats = {
         'changed': 0,
         'unchanged': 0,
         'failed': 0,
         'unreported': 0,
         }
 
     for node in nodes:
         if node.status == 'unreported':
             stats['unreported'] += 1
         elif node.status == 'changed':
             stats['changed'] += 1
         elif node.status == 'failed':
             stats['failed'] += 1
         else:
             stats['unchanged'] += 1
 
         if node.status != 'unchanged':
             nodes_overview.append(node)
 
     return render_template(
         'index.html',
         metrics=metrics,
         nodes=nodes_overview,
         stats=stats
         )
 
 
 @app.route('/nodes')
 def nodes():
     """Fetch all (active) nodes from PuppetDB and stream a table displaying
     those nodes.
 
     Downside of the streaming aproach is that since we've already sent our
     headers we can't abort the request if we detect an error. Because of this
     we'll end up with an empty table instead because of how yield_or_stop
     works. Once pagination is in place we can change this but we'll need to
     provide a search feature instead.
     """
     status_arg = request.args.get('status', '')
     nodelist = puppetdb.nodes(
         unreported=app.config['UNRESPONSIVE_HOURS'],
         with_status=True)
     nodes = []
     for node in yield_or_stop(nodelist):
         if status_arg:
             if node.status == status_arg:
                 nodes.append(node)
         else:
             nodes.append(node)
     return Response(stream_with_context(
         stream_template('nodes.html', nodes=nodes)))
 
 
 @app.route('/node/<node_name>')
 def node(node_name):
     """Display a dashboard for a node showing as much data as we have on that
     node. This includes facts and reports but not Resources as that is too
     heavy to do within a single request.
     """
     node = get_or_abort(puppetdb.node, node_name)
     facts = node.facts()
     reports = ten_reports(node.reports())
     return render_template(
         'node.html',
         node=node,
         facts=yield_or_stop(facts),
         reports=yield_or_stop(reports))
 
 
 @app.route('/reports')
 def reports():
     """Doesn't do much yet but is meant to show something like the reports of
     the last half our, something like that."""
     return render_template('reports.html')
 
 
 @app.route('/reports/<node>')
 def reports_node(node):
     """Fetches all reports for a node and processes them eventually rendering
     a table displaying those reports."""
     reports = ten_reports(yield_or_stop(
         puppetdb.reports('["=", "certname", "{0}"]'.format(node))))
     return render_template(
         'reports_node.html',
         reports=reports,
         nodename=node)
 
 
 @app.route('/report/latest/<node_name>')
 def report_latest(node_name):
     """Redirect to the latest report of a given node. This is a workaround
     as long as PuppetDB can't filter reports for latest-report? field. This
     feature has been requested: http://projects.puppetlabs.com/issues/21554
     """
     node = get_or_abort(puppetdb.node, node_name)
     reports = get_or_abort(puppetdb._query, 'reports',
                            query='["=","certname","{0}"]'.format(node_name),
                            limit=1)
     if len(reports) > 0:
         report = reports[0]['hash']
         return redirect(url_for('report', node=node_name, report_id=report))
     else:
         abort(404)
 
 
 @app.route('/report/<node>/<report_id>')
 def report(node, report_id):
     """Displays a single report including all the events associated with that
     report and their status.
     """
     reports = puppetdb.reports('["=", "certname", "{0}"]'.format(node))
 
     for report in reports:
         if report.hash_ == report_id:
             events = puppetdb.events('["=", "report", "{0}"]'.format(
                 report.hash_))
             return render_template(
                 'report.html',
                 report=report,
                 events=yield_or_stop(events))
     else:
         abort(404)
 
 
 @app.route('/facts')
 def facts():
     """Displays an alphabetical list of all facts currently known to
     PuppetDB."""
     facts_dict = collections.defaultdict(list)
     facts = get_or_abort(puppetdb.fact_names)
     for fact in facts:
         letter = fact[0].upper()
         letter_list = facts_dict[letter]
         letter_list.append(fact)
         facts_dict[letter] = letter_list
 
     sorted_facts_dict = sorted(facts_dict.items())
     return render_template('facts.html', facts_dict=sorted_facts_dict)
 
 
 @app.route('/fact/<fact>')
 def fact(fact):
     """Fetches the specific fact from PuppetDB and displays its value per
     node for which this fact is known."""
     # we can only consume the generator once, lists can be doubly consumed
     # om nom nom
     localfacts = [f for f in yield_or_stop(puppetdb.facts(name=fact))]
     return Response(stream_with_context(stream_template(
         'fact.html',
         name=fact,
         facts=localfacts)))
 
 
 @app.route('/fact/<fact>/<value>')
 def fact_value(fact, value):
     """On asking for fact/value get all nodes with that fact."""
     facts = get_or_abort(puppetdb.facts, fact, value)
     localfacts = [f for f in yield_or_stop(facts)]
     return render_template(
         'fact.html',
         name=fact,
         value=value,
         facts=localfacts)
 
 
 @app.route('/query', methods=('GET', 'POST'))
 def query():
     """Allows to execute raw, user created querries against PuppetDB. This is
     currently highly experimental and explodes in interesting ways since none
     of the possible exceptions are being handled just yet. This will return
     the JSON of the response or a message telling you what whent wrong /
     why nothing was returned."""
     if app.config['ENABLE_QUERY']:
         form = QueryForm()
         if form.validate_on_submit():
+            if form.query.data[0] == '[':
+                query = form.query.data
+            else:
+                query = '[{0}]'.format(form.query.data)
             result = get_or_abort(
                 puppetdb._query,
                 form.endpoints.data,
-                query='[{0}]'.format(form.query.data))
+                query=query)
             return render_template('query.html', form=form, result=result)
         return render_template('query.html', form=form)
     else:
         log.warn('Access to query interface disabled by administrator..')
         abort(403)
 
 
 @app.route('/metrics')
 def metrics():
     metrics = get_or_abort(puppetdb._query, 'metrics', path='mbeans')
-    for key, value in metrics.iteritems():
+    for key, value in metrics.items():
         metrics[key] = value.split('/')[3]
     return render_template('metrics.html', metrics=sorted(metrics.items()))
 
 
 @app.route('/metric/<metric>')
 def metric(metric):
-    name = urllib.unquote(metric)
+    name = unquote(metric)
     metric = puppetdb.metric(metric)
     return render_template(
         'metric.html',
         name=name,
         metric=sorted(metric.items()))
diff --git a/puppetboard/static/css/puppetboard.css b/puppetboard/static/css/puppetboard.css
index 46d002f..01b8e63 100644
--- a/puppetboard/static/css/puppetboard.css
+++ b/puppetboard/static/css/puppetboard.css
@@ -1,104 +1,65 @@
 body {
-  padding-top: 60px;
-}
-th.headerSortUp {
-  position: relative
-}
-th.headerSortDown {
-  position: relative
-}
-th.header {
-  position: relative
-}
-th.header:after {
-  content: "\f0dc"; 
-  font-family: FontAwesome;
-  font-style: normal;
-  font-weight: normal;
-  text-decoration: inherit;
-  color: #000;
-  font-size: 18px;
-  padding-right: 0.5em;
-  float:right;
-}
-th.headerSortUp:after {
-  content: "\f0de"; 
-  font-family: FontAwesome;
-  font-style: normal;
-  font-weight: normal;
-  text-decoration: inherit;
-  color: #000;
-  font-size: 18px;
-  padding-right: 0.5em;
-  float:right;
-}
-th.headerSortDown:after {
-  content: "\f0dd"; 
-  font-family: FontAwesome;
-  font-style: normal;
-  font-weight: normal;
-  text-decoration: inherit;
-  color: #000;
-  font-size: 18px;
-  padding-right: 0.5em;
-  float:right;
-}
-.stat {
-  margin-bottom: 40px;
-}
-.navbar .brand:hover {
-  color: #fff;
-}
-.table tbody tr.error>td {
-  background-color: #f2dede;
-}
-h1.error {
-  color: rgb(223, 46, 27);
-}
-h1.success {
-  color: #18BC9C;
-}
-h1.noop {
-  color:#aaa;
-}
-tr.event {
-  cursor: pointer;
-}
-td.message {
-  padding: 0;
-  border: 0;
-  background-color: #FFFFE9;
-}
-div[id^='message-event'] {
-  display: none;
-  padding: 4px 15px 4px 15px;
-}
-.label-count {
-  width:25px;
-  text-align:center;
-}
-.label-time {
-  width:73px;
-  text-align:center;
-}
-.label-status {
-  width:100px;
-  text-align:center;
-}
-.label-nothing {
-  background-color:#ddd;
-  color:#ddd;
-}
-.label.label-failed {
-  background-color: rgb(231, 76, 60);
-}
-.label.label-changed {
-  background-color: rgb(24, 188, 156);
-}
-.label.label-unreported {
-  background-color: rgb(231, 76, 60);
-  background-color: rgb(129, 145, 146);
-}
-.btn-lastreport {
-  width:100px;
+  margin: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+a {
+  color: #2C3E50;
+  text-decoration: none;
+}
+
+h1.ui.header.no-margin-bottom {
+  margin-bottom: 0;
+}
+
+.tablesorter-header-inner {
+  float: left;
+}
+
+th.tablesorter-headerAsc::after {
+  content: '\25b4' !important;
+  float: right;
+}
+
+th.tablesorter-headerDesc::after {
+  content: '\25be' !important;
+  float: right;
+}
+
+.ui.grid.padding-bottom {
+  padding-bottom: 40px !important;
+}
+
+.status {
+  width: 47%;
+  text-align: center;
+  display: block;
+}
+.count {
+  width: 21%;
+  text-align: center;
+  display: block;
+}
+
+.no-margin-top {
+  margin-top: -35px !important;
+}
+
+.absolute {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #E8E8E8;
+}
+
+.absolute div {
+  padding: 1em;
+}
+
+.ui.menu.darkblue {
+  background-color:#2C3E50;
+}
+
+.ui.darkblue.header, i.darkblue {
+  color:#2C3E50;
 }
diff --git a/puppetboard/static/js/tablesort.min.js b/puppetboard/static/js/tablesort.min.js
new file mode 100644
index 0000000..ab17511
--- /dev/null
+++ b/puppetboard/static/js/tablesort.min.js
@@ -0,0 +1,9 @@
+/*
+	A simple, lightweight jQuery plugin for creating sortable tables.
+	https://github.com/kylefox/jquery-tablesort
+	Version 0.0.2
+*/
+$(function(){var a=window.jQuery;a.tablesort=function(d,c){var e=this;this.$table=d;this.$thead=this.$table.find("thead");this.settings=a.extend({},a.tablesort.defaults,c);this.$table.find("th").bind("click.tablesort",function(){e.sort(a(this))});this.direction=this.$th=this.index=null};a.tablesort.prototype={sort:function(d,c){var e=new Date,b=this,g=this.$table,n=0<this.$thead.length?g.find("tbody tr"):g.find("tr").has("td"),m=g.find("tr td:nth-of-type("+(d.index()+1)+")"),h=d.data().sortBy,k=[],
+l=m.map(function(c,e){return h?"function"===typeof h?h(a(d),a(e),b):h:null!=a(this).data().sortValue?a(this).data().sortValue:a(this).text()});if(0!==l.length){b.$table.find("th").removeClass(b.settings.asc+" "+b.settings.desc);this.direction="asc"!==c&&"desc"!==c?"asc"===this.direction?"desc":"asc":c;c="asc"==this.direction?1:-1;b.$table.trigger("tablesort:start",[b]);b.log("Sorting by "+this.index+" "+this.direction);for(var f=0,p=l.length;f<p;f++)k.push({index:f,cell:m[f],row:n[f],value:l[f]});
+k.sort(function(a,b){return a.value>b.value?1*c:a.value<b.value?-1*c:0});a.each(k,function(a,b){g.append(b.row)});d.addClass(b.settings[b.direction]);b.log("Sort finished in "+((new Date).getTime()-e.getTime())+"ms");b.$table.trigger("tablesort:complete",[b])}},log:function(d){(a.tablesort.DEBUG||this.settings.debug)&&console&&console.log&&console.log("[tablesort] "+d)},destroy:function(){this.$table.find("th").unbind("click.tablesort");this.$table.data("tablesort",null);return null}};a.tablesort.DEBUG=
+!1;a.tablesort.defaults={debug:a.tablesort.DEBUG,asc:"sorted ascending",desc:"sorted descending"};a.fn.tablesort=function(d){var c,e;return this.each(function(){c=a(this);(e=c.data("tablesort"))&&e.destroy();c.data("tablesort",new a.tablesort(c,d))})}});
diff --git a/puppetboard/static/js/timestamps.js b/puppetboard/static/js/timestamps.js
index c682c09..a5dedd8 100644
--- a/puppetboard/static/js/timestamps.js
+++ b/puppetboard/static/js/timestamps.js
@@ -1,23 +1,23 @@
 jQuery(function ($) {
   var localise_timestamp = function(timestamp){
     if (timestamp === "None"){
       return '';
     };
     d = moment.utc(timestamp);
     d.local();
     return d;
   };
 
   $("[rel=utctimestamp]").each(
     function(index, timestamp){
       var tstamp = $(timestamp);
       var tstring = tstamp.text().trim();
       var result = localise_timestamp(tstring);
       if (result == '') {
         tstamp.text('Unknown');
       } else {
-        tstamp.text(localise_timestamp(tstring).format('LLLL'));
+        tstamp.text(localise_timestamp(tstring).format('MMM DD YYYY - HH:mm:ss'));
       };
   });
 
 });
diff --git a/puppetboard/templates/400.html b/puppetboard/templates/400.html
index 7763953..ed777cb 100644
--- a/puppetboard/templates/400.html
+++ b/puppetboard/templates/400.html
@@ -1,11 +1,5 @@
 {% extends 'layout.html' %}
-{% block row_fluid %}
-<div class="container" style="margin-bottom:55px;">
-  <div class="row">
-    <div class="span12">
-      <h2>Bad Request</h2>
-      <p>The request sent to PuppetDB was invalid. This is usually caused by using an unsupported operator.</p>
-    </div>
-  </div>
-</div>
+{% block content %}
+<h1>Bad Request</h1>
+<p>The request sent to PuppetDB was invalid. This is usually caused by using an unsupported operator.</p>
 {% endblock %}
diff --git a/puppetboard/templates/403.html b/puppetboard/templates/403.html
index bfe77d0..a5055d3 100644
--- a/puppetboard/templates/403.html
+++ b/puppetboard/templates/403.html
@@ -1,11 +1,5 @@
 {% extends 'layout.html' %}
-{% block row_fluid %}
-<div class="container" style="margin-bottom:55px;">
-  <div class="row">
-    <div class="span12">
-      <h2>Permission Denied</h2>
-      <p>What you were looking for has been disabled by the administrator.</p>
-    </div>
-  </div>
-</div>
+{% block content %}
+<h1>Permission Denied</h1>
+<p>What you were looking for has been disabled by the administrator.</p>
 {% endblock %}
diff --git a/puppetboard/templates/404.html b/puppetboard/templates/404.html
index e45a201..e9a99ac 100644
--- a/puppetboard/templates/404.html
+++ b/puppetboard/templates/404.html
@@ -1,11 +1,5 @@
 {% extends 'layout.html' %}
-{% block row_fluid %}
-<div class="container" style="margin-bottom:55px;">
-  <div class="row">
-    <div class="span12">
-      <h2>Not Found</h2>
-      <p>What you were looking for could not be found in PuppetDB.</p>
-    </div>
-  </div>
-</div>
+{% block content%}
+<h1>Not Found</h1>
+<p>What you were looking for could not be found in PuppetDB.</p>
 {% endblock %}
diff --git a/puppetboard/templates/500.html b/puppetboard/templates/500.html
index b79f451..b35ae0f 100644
--- a/puppetboard/templates/500.html
+++ b/puppetboard/templates/500.html
@@ -1,16 +1,10 @@
 {% extends 'layout.html' %}
-{% block row_fluid %}
-<div class="container" style="margin-bottom:55px;">
-  <div class="row">
-    <div class="span12">
-      <h2>Internal Server Error</h2>
-      <p>This error usually occurs because:
-        <ul>
-          <li>We were unable to reach PuppetDB;</li>
-          <Li>The query to be executed was malformed resulting in an incorrectly encoded request.</li>
-      </ul></p>
-      <p>Please have a look at the log output for further information.</p>
-    </div>
-  </div>
-</div>
+{% block content %}
+<h2>Internal Server Error</h2>
+<p>This error usually occurs because:
+  <ul>
+    <li>We were unable to reach PuppetDB;</li>
+    <Li>The query to be executed was malformed resulting in an incorrectly encoded request.</li>
+</ul></p>
+<p>Please have a look at the log output for further information.</p>
 {% endblock %}
diff --git a/puppetboard/templates/_macros.html b/puppetboard/templates/_macros.html
index ba70a69..3c0bad5 100644
--- a/puppetboard/templates/_macros.html
+++ b/puppetboard/templates/_macros.html
@@ -1,148 +1,148 @@
 {% macro facts_table(facts, autofocus=False, condensed=False, show_node=False, show_value=True, link_facts=False, margin_top=20, margin_bottom=20) -%}
-<div class="filter" style="margin-bottom:{{margin_bottom}}px;margin-top:{{margin_top}}px;">
-  <input {% if autofocus %} autofocus="autofocus" {% endif %} style="width:100%" type="text" class="filter-table input-medium search-query" placeholder="Type here to filter">
+<div class="ui fluid icon input hide" style="margin-bottom:20px">
+  <input {% if autofocus %} autofocus="autofocus" {% endif %} class="filter-table" placeholder="Type here to filter...">
 </div>
-<table class="filter-table facts table table-striped {% if condensed %}table-condensed{% endif%}" style="table-layout:fixed">
+<table class="filter-table facts ui basic table facts {% if condensed %}compact{% endif%}" style="table-layout: fixed;">
   <thead>
     <tr>
       {% if show_node %}
       <th>Node</th>
       {% else %}
       <th>Fact</th>
       {% endif %}
       {% if show_value %}
       <th>Value</th>
       {% endif %}
     </tr>
   </thead>
   <tbody class="searchable">
     {% for fact in facts %}
     <tr>
       {% if show_node %}
         <td><a href="{{url_for('node', node_name=fact.node)}}">{{fact.node}}</a></td>
       {% else %}
         <td><a href="{{url_for('fact', fact=fact.name)}}">{{fact.name}}</a></td>
       {% endif %}
       {% if show_value %}
       <td style="word-wrap:break-word">
         {% if link_facts %}
           <a href="{{url_for('fact_value', fact=fact.name, value=fact.value)}}">{{fact.value}}</a>
         {% else %}
           {{fact.value}}
         {% endif %}
       </td>
       {% endif %}
     </tr>
     {% endfor %}
   </tbody>
 </table>
 {%- endmacro %}
 {% macro facts_graph(facts, autofocus=False, condensed=False, show_node=False, margin_top=20, margin_bottom=20) -%}
 <script src="{{url_for('static', filename='js/Chart.js')}}"></script>
 <canvas id="factChart" width="300" height="300"></canvas>
 <script type="text/javascript">
   var colors = ["#9B59B6", "#3498DB", "#2ECC71", "#1ABC9C", "#F1C40F", "#E67E22", "#E74C3C"];
   var len_colors = colors.length;
   var data = [
 {% for fact in facts|groupby('value') %}
     {
     label: "{{ fact.grouper }}",
     value: {{ fact.list|length }}
     },
 {% endfor %}
     {
     value: 0,
     }
   ]
   for (var i = 0; i < data.length; i++) {
     data[i].color = colors[i % len_colors];
   }
   var sorted_data = data.sort(function(a,b) { return parseFloat(b.value) - parseFloat(a.value)});
   var top7 = sorted_data.slice(0,7);
   var bottom = data.slice(7, -1);
   var bottom_sum = 0;
   for (var i = 0; i < bottom.length; i++) {
     bottom_sum += bottom[i].value;
   }
   top7.push({ label: "Other", value: bottom_sum, color: "#B30202" });
   var ctx = document.getElementById("factChart").getContext("2d");
   new Chart(ctx).Pie(top7, {'animation': false});
 </script>
 {%- endmacro %}
 {% macro facts_graph_value(facts, autofocus=False, condensed=False, show_node=False, margin_top=20, margin_bottom=20) -%}
 <script src="{{url_for('static', filename='js/Chart.js')}}"></script>
 <canvas id="factChart_value" width="300" height="300"></canvas>
 <script type="text/javascript">
   var colors = ["#9B59B6", "#3498DB", "#2ECC71", "#1ABC9C", "#F1C40F", "#E67E22", "#E74C3C"];
   var len_colors = colors.length;
   var data = [
 {% for fact in facts|groupby('value') %}
     {
     label: "{{ fact.grouper }}",
     value: {{ fact.list|length }}
     },
 {% endfor %}
     {
     value: 0,
     }
   ]
 
   for (var i = 0; i < data.length; i++) {
     data[i].color = colors[i % len_colors];
   }
   var ctx = document.getElementById("factChart_value").getContext("2d");
   new Chart(ctx).Pie(data.sort(function(a,b) { return parseInt(a.label) - parseInt(b.label)}), {'animation':false});
 </script>
 {%- endmacro %}
 
 {% macro reports_table(reports, nodename, condensed=False, hash_truncate=False, show_conf_col=True, show_agent_col=True, show_host_col=True) -%}
-<div class="alert alert-info">
+<div class="ui info message">
   Only showing the last ten reports.
 </div>
-<table class='table table-striped {% if condensed %}table-condensed{% endif %}'>
+<table class='ui table basic {% if condensed %}compact{% endif %}'>
   <thead>
     <tr>
       <th>Start time</th>
       <th>Run time</th>
       <th>Full report</th>
       {% if show_conf_col %}
         <th>Configuration version</th>
       {% endif %}
       {% if show_agent_col %}
         <th>Agent version</th>
       {% endif %}
       {% if show_host_col %}
         <th>Hostname</th>
       {% endif %}
     <tr>
   </thead>
   <tbody>
   {% for report in reports %}
     {% if hash_truncate %}
-    {% set rep_hash = "%s&hellip;"|format(report.hash_[0:6])|safe %}
+    {% set rep_hash = "%s&hellip;"|format(report.hash_[0:10])|safe %}
     {% else %}
     {% set rep_hash = report.hash_ %}
     {% endif %}
     {% if report.failed %}
     <tr class="error">
     {% else %}
     <tr>
     {% endif %}
     <td rel="utctimestamp">{{report.start}}</td>
       <td>{{report.run_time}}</td>
 
       <td><a href="{{url_for('report', node=nodename, report_id=report.hash_)}}">{{rep_hash}}</a></td>
       {% if show_conf_col %}
         <td>{{report.version}}</td>
       {% endif %}
       {% if show_agent_col %}
         <td>{{report.agent_version}}</td>
       {% endif %}
       {% if show_host_col %}
-        <td>{{nodename}}</td>
+        <td><a href="{{url_for('node', node_name=report.node)}}">{{ report.node }}</a></td>
       {% endif %}
     </tr>
     {% endfor %}
   </tbody>
 </table>
 {%- endmacro %}
diff --git a/puppetboard/templates/fact.html b/puppetboard/templates/fact.html
index 9950d74..b6a9782 100644
--- a/puppetboard/templates/fact.html
+++ b/puppetboard/templates/fact.html
@@ -1,12 +1,12 @@
 {% extends 'layout.html' %}
 {% import '_macros.html' as macros %}
 {% block content %}
 <h1>{{name}}{% if value %}/{{value}}{% endif %} ({{facts|length}})</h1>
-{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}
-{{macros.facts_graph_value(facts, autofocus=True, show_node=True, margin_bottom=10)}}
+{#{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}#
+{{macros.facts_graph_value(facts, autofocus=True, show_node=True, margin_bottom=10)}}#}
 {% if value %}
 {{macros.facts_table(facts, autofocus=True, show_node=True, show_value=False, margin_bottom=10)}}
 {% else %}
 {{macros.facts_table(facts, autofocus=True, show_node=True, link_facts=True, margin_bottom=10)}}
 {% endif %}
 {% endblock content %}
diff --git a/puppetboard/templates/facts.html b/puppetboard/templates/facts.html
index 44177ec..98d390c 100644
--- a/puppetboard/templates/facts.html
+++ b/puppetboard/templates/facts.html
@@ -1,16 +1,16 @@
 {% extends 'layout.html' %}
 {% block content %}
-<div class="hide" style="margin-bottom:20px">
-  <input autofocus="autofocus" style="width:100%" type="text" class="filter-list input-medium search-query" placeholder="Type here to filter">
+<div class="ui fluid icon input hide" style="margin-bottom:20px">
+  <input autofocus="autofocus" class="filter-list" placeholder="Type here to filter...">
 </div>
 <div style="-moz-column-count:4; -webkit-column-count:4; column-count:4;">
   {%- for key,facts_list in facts_dict %}
-  <span class='label label-success'>{{key}}</span>
+  <span class='ui label purple'>{{key}}</span>
   <ul class="searchable">
     {%- for fact in facts_list %}
     <li><a href="{{url_for('fact', fact=fact)}}">{{fact}}</a></li>
     {%- endfor %}
   </ul>
   {% endfor %}
 </div>
 {% endblock content %}
diff --git a/puppetboard/templates/index.html b/puppetboard/templates/index.html
index b144fad..2aac1fd 100644
--- a/puppetboard/templates/index.html
+++ b/puppetboard/templates/index.html
@@ -1,102 +1,106 @@
 {% extends 'layout.html' %}
-{% block row_fluid %}
-<div class="container" style="margin-bottom:55px;">
-
-  <div class="row">
-    <div class="span12">
-      <div class="span4 stat">
-       <a href="nodes?status=failed">
-         <h1 class="error">{{stats['failed']}}
-           <small>{% if stats['failed']== 1 %} node {% else %} nodes {% endif %}</small>
-         </h1>
-       </a>
-       <span>with status failed</span>
-      </div>
-      <div class="span4 stat">
-        <a href="nodes?status=changed">
-          <h1 class="success">{{stats['changed']}}
-            <small>{% if stats['changed']== 1 %} node {% else %} nodes {% endif %}</small>
-          </h1>
-        </a>
-        <span>with status changed</span>
-      </div>
-      <div class="span4 stat">
-        <a href="nodes?status=unreported">
-          <h1 class="noop">{{ stats['unreported'] }}
-            <small>{% if stats['unreported']== 1 %} node {% else %} nodes {% endif %}</small>
-          </h1>
-        </a>
-        <span>
-          unreported in the last {{ config.UNRESPONSIVE_HOURS }} hours
-        </span>
-      </div>
+{% block content %}
+<div class="ui vertical grid">
+  <div class="three column row">
+    <div class="column">
+      <a href="nodes?status=failed">
+        <h1 class="ui red header no-margin-bottom">
+          {{stats['failed']}}
+          <small>{% if stats['failed']== 1 %} node {% else %} nodes {% endif %}</small>
+        </h1>
+      </a>
+      <span>with status failed</span>
+    </div>
+    <div class="column">
+      <a href="nodes?status=changed">
+        <h1 class="ui header green no-margin-bottom">
+          {{stats['changed']}}
+          <small>{% if stats['changed']== 1 %} node {% else %} nodes {% endif %}</small>
+        </h1>
+      </a>
+      <span>with status changed</span>
+    </div>
+    <div class="column">
+      <a href="nodes?status=unreported">
+        <h1 class="ui header black no-margin-bottom">
+          {{ stats['unreported'] }}
+          <small>{% if stats['unreported']== 1 %} node {% else %} nodes {% endif %}</small>
+        </h1>
+      </a>
+      <span>unreported in the last {{ config.UNRESPONSIVE_HOURS }} hours</span>
     </div>
   </div>
-
-  <div class="row">
-    <div class="span12">
-      <div class="span4 stat">
-        <h1>{{metrics['num_nodes']}}</h1>
-        <span>Population</span>
-      </div>
-      <div class="span4 stat">
-        <h1>{{metrics['num_resources']}}</h1>
-        <span>Resources managed</span>
-      </div>
-      <div class="span4 stat">
-        <h1>{{metrics['avg_resources_node']}}</h1>
-        <span>Avg. resources/node</span>
-      </div>
+  <div class="three column row">
+    <div class="column">
+      <h1 class="ui header darkblue no-margin-bottom">{{metrics['num_nodes']}}</h1>
+      <span>Population</span>
+    </div>
+    <div class="column">
+      <h1 class="ui header darkblue no-margin-bottom">{{metrics['num_resources']}}</h1>
+      <span>Resources managed</span>
+    </div>
+    <div class="column">
+      <h1 class="ui header darkblue no-margin-bottom">{{metrics['avg_resources_node']}}</h1>
+      <span>Avg. resources/node</span>
     </div>
   </div>
-
-  <div class="row">
-    <div class="span12">
+  <div class="ui divider">
+  </div>
+  <div class="one column row no-margin-top">
+    <div class="column">
       {% if nodes %}
-        <h2>Nodes status detail ({{nodes|length}})</h2>
-        <table class='dashboard table table-striped table-condensed'>
-            <thead>
-              <tr>
-              <th style="min-width:220px;">Status</th>
-              <th style="width:600px;">Hostname</th>
-              <th style="width:120px;"></th>
-              </tr>
-            </thead>
-          <tbody class="searchable">
-            {% for node in nodes %}
-              {% if node.status != 'unchanged' %}
-            <tr>
-              <td>
-               <a href="{{url_for('report_latest', node_name=node.name)}}">
-                 <span class="label label-status label-{{node.status}}">{{node.status}}</span>
-                 </a>
-                 {% if node.status=='unreported'%}
-                     <span class="label label-time label-unreported"> {{ node.unreported_time }} </label>
-                  {% else %}
-                     {% if node.events['failures'] %}<span class="label label-important label-count">{{node.events['failures']}}</span>{% else %}<span class="label label-count">0</span>{% endif%}
-                     {% if node.events['successes'] %}<span class="label label-success label-count">{{node.events['successes']}}</span>{% else %}<span class="label label-count">0</span>{% endif%}
-                  {% endif %}
-              </td>
-              <td><a href="{{url_for('node', node_name=node.name)}}">{{ node.name }}</a></td>
-              <td>
-                {% if node.unreported_time != None or node.status != 'unreported' %}
-                  <a class="btn btn-small btn-primary btn-lastreport" href="{{url_for('report_latest', node_name=node.name)}}">Latest Report</a>
+      <h2>Nodes status detail ({{nodes|length}})</h2>
+      <table class='ui compact basic table dashboard'>
+        <thead>
+          <tr>
+            <th class="five wide">Status</th>
+            <th class="ten wide">Hostname</th>
+            <th class="one wide"></th>
+          </tr>
+        </thead>
+        <tbody class="searchable">
+          {% for node in nodes %}
+          {% if node.status != 'unchanged' %}
+          <tr>
+            <td>
+              <a class="ui small status label
+                {% if node.status == 'failed' %}
+                  red
+                {% elif node.status == 'changed' %}
+                  green
+                {% elif node.status == 'unreported' %}
+                  black
+                {% endif %}
+                " href="{{url_for('report_latest', node_name=node.name)}}">
+                  {{node.status}}
+                </a>
+                {% if node.status=='unreported'%}
+                  <span class="ui small label status"> {{ node.unreported_time }} </label>
                 {% else %}
-                  <a class="btn btn-small btn-lastreport"> No Report </a>
+                   {% if node.events['failures'] %}<span class="ui small count label red">{{node.events['failures']}}</span>{% else %}<span class="ui small count label">0</span>{% endif%}
+                   {% if node.events['successes'] %}<span class="ui small count label green">{{node.events['successes']}}</span>{% else %}<span class="ui small count label">0</span>{% endif%}
                 {% endif %}
-              </td>
-            </tr>
-              {% endif %}
-            {% endfor %}
-          </tbody>
-        </table>
+            </td>
+            <td>
+              <a href="{{url_for('node', node_name=node.name)}}">{{ node.name }}</a>
+            </td>
+            <td>
+              <a title="Latest Report" href="{{url_for('report_latest', node_name=node.name)}}">
+                <i class="large tasks darkblue icon"></i>
+              </a>
+            </td>
+          </tr>
+          {% endif %}
+          {% endfor %}
+        </tbody>
+      </table>
       {% else %}
-        <h2>Nodes status detail</h2>
-        <div class="alert alert-info">
-          Nothing seems to be changing.
-        </div>
+      <h2>Nodes status detail</h2>
+      <div class="ui info message">
+        Nothing seems to be changing.
+      </div>
       {% endif %}
     </div>
   </div>
 </div>
-{% endblock row_fluid %}
+{% endblock content %}
diff --git a/puppetboard/templates/layout.html b/puppetboard/templates/layout.html
index a49e942..b7697d4 100644
--- a/puppetboard/templates/layout.html
+++ b/puppetboard/templates/layout.html
@@ -1,67 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Puppet&#7427;oard</title>
-    <link href="//netdna.bootstrapcdn.com/bootswatch/2.3.2/flatly/bootstrap.min.css" rel="stylesheet">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
-    <link href="{{url_for('static', filename='css/puppetboard.css')}}" rel="stylesheet">
+    <title>Puppetboard</title>
+    <link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css" rel="stylesheet">
+    <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/css/filter.formatter.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/puppetboard.css')}}" rel="stylesheet">
   </head>
 
   <body>
-    <div style="font-variant:small-caps"  class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </a>
-          <span style="margin-top:-2px;" class="brand">Puppetboard</span>
-          <div class="nav-collapse collapse">
-            <ul class="nav">
-              {%- for endpoint, caption in [
-              ('index', 'Overview'),
-              ('nodes', 'Nodes'),
-              ('facts', 'Facts'),
-              ('reports', 'Reports'),
-              ('metrics', 'Metrics'),
-              ('query', 'Query'),
-                ] %}
-                  <li{% if endpoint == request.endpoint %} class=active{% endif
-                    %}><a href="{{ url_for(endpoint) }}">{{ caption }}</a></li>
-                {%- endfor %}
-            </ul>
-          </div>
-        </div>
+    <nav class="ui fixed darkblue inverted menu">
+      <div class="title item">
+        Puppetboard
       </div>
-    </div>
-    {% block container %}
-    <div class="container-fluid" style="margin-bottom:55px;">
-      <div class="row-fluid">
-        {% block row_fluid %}
-        <div class="span12">
-          {% block content %} {% endblock content %}
-        </div>
-        {% endblock row_fluid %}
+      {%- for endpoint, caption in [
+      ('index', 'Overview'),
+      ('nodes', 'Nodes'),
+      ('facts', 'Facts'),
+      ('reports', 'Reports'),
+      ('metrics', 'Metrics'),
+      ('query', 'Query'),
+      ] %}
+      <a {% if endpoint == request.endpoint %} class="active item" {% else %} class="item" {% endif %}
+        href="{{ url_for(endpoint) }}">{{ caption }}</a>
+      {%- endfor %}
+    </nav>
+    <div class="ui grid padding-bottom">
+      <div class="one wide column"></div>
+      <div class="fourteen wide column">
+        {% block content %} {% endblock content %}
       </div>
+      <div class="one wide column"></div>
     </div>
-    {% endblock container %}
-    <div class="navbar navbar-fixed-bottom" style="background-color:rgb(249, 249, 249);">
-      <div class="navbar" style="height:55px;margin-bottom:0;">
-        <div class="container-fluid" style="line-height:55px;">
-          Copyright © 2013 <a href="https://github.com/daenney">Daniele Sluijters</a>. <span style="float:right">Live from PuppetDB.</span>
-        </div>
-      </div>
+
+    <footer class="ui absolute fixed bottom">
+      <div>
+      Copyright © 2013-2014 <a href="https://github.com/daenney">Daniele Sluijters</a>. <span style="float:right">Live from PuppetDB.</span>
     </div>
+    </footer>
 
-    <script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
-    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
-    <script src="//cdn.jsdelivr.net/tablesorter/2.0.3/jquery.tablesorter.min.js"></script>
-    <script src="{{ url_for('static', filename='js/moment.js')}}"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.tablesorter.min.js"></script>
     <script src="{{ url_for('static', filename='js/timestamps.js')}}"></script>
-    <script src="{{url_for('static', filename='js/tables.js')}}"></script>
     <script src="{{url_for('static', filename='js/lists.js')}}"></script>
+    <script src="{{url_for('static', filename='js/tables.js')}}"></script>
+
     {% block script %} {% endblock script %}
   </body>
 </html>
diff --git a/puppetboard/templates/metric.html b/puppetboard/templates/metric.html
index 0e8c250..1473883 100644
--- a/puppetboard/templates/metric.html
+++ b/puppetboard/templates/metric.html
@@ -1,23 +1,33 @@
 {% extends 'layout.html' %}
 {% block content %}
 <div class="page-header">
   <h1>Metric
-    {% set name = "%s&hellip;"|format(name[:75])|safe if name|length > 75%}
+    {% if name|length > 75 %}
+    {% set name = "%s&hellip;"|format(name[:75])|safe %}
+    {% else %}
+    {% set name = name %}
+    {% endif %}
     <small>{{name}}</small>
   </h1>
 </div>
-<table class="table table-striped">
+<table class="ui segment table">
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Value</th>
+    </tr>
+  </thead>
   <tbody>
     {% for key,value in metric %}
     <tr>
       <td>{{key}}</td>
       {% if value is mapping %}
         <td><pre>{{value|jsonprint}}</pre></td>
       {% else %}
         <td>{{value}}</td>
       {% endif %}
     </tr>
     {% endfor %}
   </tbody>
 </table>
 {% endblock content %}
diff --git a/puppetboard/templates/node.html b/puppetboard/templates/node.html
index 2a811cb..b5b4519 100644
--- a/puppetboard/templates/node.html
+++ b/puppetboard/templates/node.html
@@ -1,37 +1,39 @@
 {% extends 'layout.html' %}
 {% import '_macros.html' as macros %}
 {% block content %}
-<div class="row-fluid">
-  <div class="span12">
-    <h1>Details</h1>
-    <table class="table table-striped table-condensed" style="table-layout:fixed">
-      <thead>
-        <tr>
-          <th>Hostname</th>
-          <th>Facts uploaded at</th>
-          <th>Catalog compiled at</th>
-          <th>Report uploaded at</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td style="word-wrap:break-word"><b>{{node.name}}</b></td>
-          <td rel="utctimestamp">{{node.facts_timestamp}}</td>
-          <td rel="utctimestamp">{{node.catalog_timestamp}}</td>
-          <td rel="utctimestamp">{{node.report_timestamp}}</td>
-        </tr>
-      </tbody>
-    </table>
+<div class='ui two column grid'>
+  <div class='column'>
+    <div class='row'>
+      <h1>Details</h1>
+      <table class="ui table compact basic">
+        <tbody>
+          <tr>
+            <th>Hostname</th>
+            <td style="word-wrap:break-word"><b>{{node.name}}</b></td>
+          </tr>
+          <tr>
+            <th>Facts &nbsp;&nbsp;&nbsp;&nbsp;<i title='uploaded at' class=' upload icon'></i></th>
+            <td rel="utctimestamp">{{node.facts_timestamp}}</td>
+          </tr>
+          <tr>
+            <th>Catalog <i title='uploaded at' class=' upload icon'></i></th>
+            <td rel="utctimestamp">{{node.catalog_timestamp}}</td>
+          </tr>
+          <tr>
+            <th>Report &nbsp;<i title='uploaded at' class=' upload icon'></i></th>
+            <td rel="utctimestamp">{{node.report_timestamp}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class='row'>
+      <h1>Reports</h1>
+      {{ macros.reports_table(reports, node.name, condensed=True, hash_truncate=True, show_conf_col=False, show_agent_col=False, show_host_col=False)}}
+    </div>
   </div>
-</div>
-<div class="row-fluid">
-  <div class="span6">
+  <div class='column'>
     <h1>Facts</h1>
-    {{macros.facts_table(facts, link_facts=True, condensed=True, margin_top=10)}}
-  </div>
-  <div class="span6">
-    <h1>Reports</h1>
-    {{ macros.reports_table(reports, node.name, condensed=True, hash_truncate=True, show_conf_col=False, show_agent_col=False, show_host_col=False)}}
+    {{macros.facts_table(facts, link_facts=True, condensed=True)}}
   </div>
 </div>
 {% endblock content %}
diff --git a/puppetboard/templates/nodes.html b/puppetboard/templates/nodes.html
index bc3b6af..2b317e3 100644
--- a/puppetboard/templates/nodes.html
+++ b/puppetboard/templates/nodes.html
@@ -1,60 +1,57 @@
 {% extends 'layout.html' %}
 {% block content %}
-<div class="alert alert-info">
-  PuppetDB currently only returns active nodes.
+<div class="ui fluid icon input hide" style="margin-bottom:20px">
+  <input autofocus="autofocus" class="filter-table" placeholder="Type here to filter...">
 </div>
-      {% with messages = get_flashed_messages(with_categories=true) %}
-      {% if messages %}
-      {% for category, message in messages %}
-        <div class="alert alert-{{category}}">
-          {{message}}
-        </div>
-      {% endfor %}
-      {% endif %}
-      {% endwith %}
-<div class="hide" style="margin-bottom:20px">
-<input autofocus="autofocus" style="width:100%" type="text" class="filter-table input-medium search-query" placeholder="Type here to filter">
-</div>
-<table class='nodes table table-striped table-condensed'>
+<table class='ui compact basic table nodes'>
   <thead>
     <tr>
       <th>Status</th>
       <th>Hostname</th>
-      <th>Catalog compiled at</th>
-      <th>Last report</th>
+      <th>Catalog</th>
+      <th>Report</th>
       <th>&nbsp;</th>
     </tr>
   </thead>
   <tbody class="searchable">
     {% for node in nodes %}
     <tr>
-      <td><a href="{{url_for('report_latest', node_name=node.name)}}">
-          <span class="label label-status label-{{ node.status }}">{{ node.status }}</span>
-        </a>
-        {% if node.status=='unreported'%}
-          <span class="label label-time label-unreported"> {{ node.unreported_time }} </label>
-        {% else %}
-          {% if node.events['failures'] %}<span class="label label-count label-important">{{node.events['failures']}}</span>{% else %}<span class="label label-count">0</span>{% endif%}
-          {% if node.events['successes'] %}<span class="label label-count label-success">{{node.events['successes']}}</span>{% else %}<span class="label label-count">0</span>{% endif%}
-        {% endif %}
+      <td>
+        <a class="ui small status label
+          {% if node.status == 'failed' %}
+            red
+          {% elif node.status == 'changed' %}
+            green
+          {% elif node.status == 'unreported' %}
+            black
+          {% endif %}
+          " href="{{url_for('report_latest', node_name=node.name)}}">
+            {{node.status}}
+          </a>
+          {% if node.status=='unreported'%}
+            <span class="ui small label status"> {{ node.unreported_time }} </label>
+          {% else %}
+          <span>{% if node.events['failures'] %}<span class="ui small count label red">{{node.events['failures']}}</span>{% else %}<span class="ui small count label">0</span>{% endif%}
+            {% if node.events['successes'] %}<span class="ui small count label green">{{node.events['successes']}}</span>{% else %}<span class="ui small count label">0</span>{% endif%}</span>
+          {% endif %}
       </td>
       <td><a href="{{url_for('node', node_name=node.name)}}">{{node.name}}</a></td>
       <td rel="utctimestamp">{{node.catalog_timestamp}}</td>
       <td>
         {% if node.report_timestamp %}
-        <span rel="utctimestamp">{{ node.report_timestamp }}</span>
+        <a href="{{url_for('report_latest', node_name=node.name)}}" rel='utctimestamp'>{{ node.report_timestamp }}</a>
         {% else %}
-          <i class="icon icon-ban-circle"></i>
+          <i class="large ban circle icon"></i>
         {% endif %}
       </td>
       <td>
         {% if node.report_timestamp %}
-        <a class="btn btn-small btn-primary"  href="{{url_for('report_latest', node_name=node.name)}}">Latest Report</a>
-        <a class="btn btn-small btn-primary" href="{{url_for('reports_node', node=node.name)}}">Reports</a>
+        <a title='Reports' href="{{url_for('reports_node', node=node.name)}}"><i class='large darkblue book icon'></i></a>
+        <i class='large darkblue trash icon'></i>
         {% endif %}
       </td>
     </tr>
     {% endfor %}
   </tbody>
 </table>
 {% endblock content %}
diff --git a/puppetboard/templates/query.html b/puppetboard/templates/query.html
index dfbe4f0..10089e5 100644
--- a/puppetboard/templates/query.html
+++ b/puppetboard/templates/query.html
@@ -1,61 +1,43 @@
 {% extends 'layout.html' %}
-{% block row_fluid %}
-<div class="span12">
-  <div class="alert">
-    This is highly experimental and will likely set your server on fire.
-  </div>
+{% block content %}
+<h2>Compose</h2>
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+{% for category, message in messages %}
+<div class="ui {{category}} message">
+  {{message}}
 </div>
-<div class="container" style="margin-bottom:55px;">
-  <div class="row">
-    <div class="span12">
-      <h2>Compose</h2>
-      {% with messages = get_flashed_messages(with_categories=true) %}
-      {% if messages %}
-      {% for category, message in messages %}
-        <div class="alert alert-{{category}}">
-          {{message}}
+{% endfor %}
+{% endif %}
+{% endwith %}
+<div class="ui form">
+  <form method="POST" action="{{ url_for('query')}}"
+    {{ form.csrf_token }}
+    <div class="field {% if form.query.errors %} error {% endif %}">
+      {{form.query(autofocus="autofocus", rows=5, placeholder="Enter your query: [\"=\", \"name\", \"hostname\"]. You may omit the opening and closing bracket.")}}
+    </div>
+    <div class="inline fields">
+      {% for subfield in form.endpoints %}
+      <div class="field">
+        <div class="ui radio checkbox">
+          {{subfield }}
+          {{subfield.label}}
         </div>
+      </div>
       {% endfor %}
-      {% endif %}
-      {% endwith %}
-      <form class="form-horizontal" method="POST" action="{{ url_for('query')}}">
-        {{ form.csrf_token }}
-        <div class="control-group {% if form.query.errors %} error {% endif %}">
-          {{form.query.label(class_="control-label")}}
-          <div class="controls">
-            {{form.query(class_="input-block-level", autofocus="autofocus", rows=5, placeholder="\"=\", \"name\", \"hostname\"")}}
-            {% if form.query.errors %}
-            <span class="help-inline">{% for error in form.query.errors %}{{error}}{% endfor %}</span>
-            {% endif %}
-          </div>
-        </div>
-        <div class="control-group {% if form.endpoints.errors %} error {% endif %}">
-          {{form.endpoints.label(class_="control-label")}}
-          <div class="controls">
-            {% for subfield in form.endpoints %}
-            {{subfield.label(class_="radio inline")}}
-            {{subfield }}
-            {% endfor %}
-            {% if form.endpoints.errors %}
-            <span class="help-inline">{% for error in form.endpoints.errors %}{{error}}{% endfor %}</span>
-            {% endif %}
-          </div>
-        </div>
-        <div class="form-actions">
-            <button type="submit" class="btn btn-primary">Yes I'm sure</button>
-            <button type="button" class="btn">No thanks</button>
-        </div>
-        {{ form.hidden_tag() }}
-      </form>
     </div>
-  </div>
-  {% if result %}
-  <div class="row">
-    <div class="span12">
-      <h2>Result</h2>
+    {{ form.hidden_tag() }}
+    <input type=submit class="ui submit button" value='Submit'>
+    <input type=reset class="ui red submit button" value='Cancel'>
+  </form>
+</div>
+
+{% if result %}
+<div class="row">
+  <div class="span12">
+    <h2>Result</h2>
       <pre><code>{{result|jsonprint}}</code></pre>
-    </div>
   </div>
-  {% endif %}
 </div>
-{% endblock row_fluid %}
+{% endif %}
+{% endblock content %}
diff --git a/puppetboard/templates/report.html b/puppetboard/templates/report.html
index 7a452f3..5e4a185 100644
--- a/puppetboard/templates/report.html
+++ b/puppetboard/templates/report.html
@@ -1,73 +1,73 @@
 {% extends 'layout.html' %}
 {% block content %}
 <h1>Summary</h1>
-<table class='table table-striped'>
+<table class='ui basic table'>
   <thead>
     <tr>
       <th>Hostname</th>
       <th>Configuration version</th>
       <th>Start time</th>
       <th>End time</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><a href="{{url_for('node', node_name=report.node)}}">{{ report.node }}</a></td>
       <td>
         {{report.version}}
       </td>
       <td rel="utctimestamp">
         {{report.start}}
       </td>
       <td rel="utctimestamp">
         {{report.end}}
       </td>
     </tr>
   </tbody>
 </table>
 
 <h1>Events</h1>
-<table class='table table-striped table-condensed'>
+<table class='ui basic table compact'>
   <thead>
     <tr>
       <th>Resource</th>
       <th>Status</th>
       <th>Changed From</th>
       <th>Changed To</th>
     </tr>
   </thead>
   <tbody>
     {% for event in events %}
     {% if not event.failed and event.item['old'] != event.item['new'] %}
-      <tr id='event-{{loop.index}}' class='success event'>
+      <tr id='event-{{loop.index}}' class='positive'>
     {% elif event.failed %}
-      <tr id='event-{{loop.index}}' class='error event'>
+      <tr id='event-{{loop.index}}' class='error'>
     {% endif %}
       <td>{{event.item['type']}}[{{event.item['title']}}]</td>
       <td>{{event.status}}</td>
       <td>{{event.item['old']}}</td>
       <td>{{event.item['new']}}</td>
     </tr>
-    <tr>
+    {#    <tr>
       <td class='message' colspan='4'>
         <div id='message-event-{{loop.index}}'>
           {{event.item['message']}}
         </div>
       </td>
-    </tr>
+    </tr>#}
     {% endfor %}
   </tbody>
 </table>
 
 {% endblock content %}
 {% block script %}
   <script type='text/javascript'>
     jQuery(function ($) {
       $("[rel=tooltip]").tooltip();
       $(".event").click(function() {
         $("#message-" + this.id).slideToggle(200);
         return false;
       });
     });
   </script>
 {% endblock script %}
diff --git a/puppetboard/templates/reports.html b/puppetboard/templates/reports.html
index 2d65c70..924d325 100644
--- a/puppetboard/templates/reports.html
+++ b/puppetboard/templates/reports.html
@@ -1,6 +1,6 @@
 {% extends 'layout.html' %}
 {% block content %}
-<div class="alert">
+<div class="ui warning message">
   Pending <a href="http://projects.puppetlabs.com/issues/21600">#21600</a>. You can access reports for a node or individual reports through the <a href="{{url_for('nodes')}}">Nodes</a> tab.
 </div>
 {% endblock content %}
diff --git a/puppetboard/utils.py b/puppetboard/utils.py
index 03ecb85..608fbae 100644
--- a/puppetboard/utils.py
+++ b/puppetboard/utils.py
@@ -1,55 +1,55 @@
 from __future__ import absolute_import
 from __future__ import unicode_literals
 
 import json
 
 from requests.exceptions import HTTPError, ConnectionError
 from pypuppetdb.errors import EmptyResponseError
 
 from flask import abort
 
 def jsonprint(value):
   return json.dumps(value, indent=2, separators=(',', ': ') )
 
 
 def get_or_abort(func, *args, **kwargs):
     """Execute the function with its arguments and handle the possible
     errors that might occur.
 
     In this case, if we get an exception we simply abort the request.
     """
     try:
         return func(*args, **kwargs)
-    except HTTPError, e:
+    except HTTPError as e:
         abort(e.response.status_code)
     except ConnectionError:
         abort(500)
     except EmptyResponseError:
         abort(204)
 
 
 def ten_reports(reports):
     """Helper to yield the first then reports from the reports generator.
 
     This is an ugly solution at best...
     """
     for count, report in enumerate(reports):
         if count == 10:
             raise StopIteration
         yield report
 
 
 def yield_or_stop(generator):
     """Similar in intent to get_or_abort this helper will iterate over our
     generators and handle certain errors.
 
     Since this is also used in streaming responses where we can't just abort
     a request we raise StopIteration.
     """
     while True:
         try:
             yield next(generator)
         except StopIteration:
             raise
         except (EmptyResponseError, ConnectionError, HTTPError):
             raise StopIteration
diff --git a/requirements.txt b/requirements.txt
index f1c06db..f9f044a 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,9 +1,9 @@
 Flask==0.10.1
-Flask-WTF==0.8.4
-Jinja2==2.7
-MarkupSafe==0.18
-WTForms==1.0.4
-Werkzeug==0.9.3
-itsdangerous==0.22
-pypuppetdb==0.1.0
-requests==1.2.3
+Flask-WTF==0.9.4
+Jinja2==2.7.2
+MarkupSafe==0.19
+WTForms==1.0.5
+Werkzeug==0.9.4
+itsdangerous==0.23
+pypuppetdb==0.1.1
+requests==2.2.1
diff --git a/setup.py b/setup.py
index 70a3012..5fc34d4 100644
--- a/setup.py
+++ b/setup.py
@@ -1,49 +1,52 @@
 import sys
 import os
 import codecs
 
 from setuptools import setup, find_packages
 
 
 if sys.argv[-1] == 'publish':
     os.system('python setup.py sdist upload')
     sys.exit()
 
 VERSION = "0.0.4"
 
 with codecs.open('README.rst', encoding='utf-8') as f:
     README = f.read()
 
 with codecs.open('CHANGELOG.rst', encoding='utf-8') as f:
     CHANGELOG = f.read()
 
 setup(
     name='puppetboard',
     version=VERSION,
     author='Daniele Sluijters',
     author_email='daniele.sluijters+pypi@gmail.com',
     packages=find_packages(),
     url='https://github.com/nedap/puppetboard',
     license='Apache License 2.0',
     description='Web frontend for PuppetDB',
     include_package_data=True,
     long_description='\n'.join((README, CHANGELOG)),
     install_requires=[
         "Flask >= 0.10.1",
         "Flask-WTF >= 0.9.4",
         "pypuppetdb >= 0.1.0",
         ],
     keywords="puppet puppetdb puppetboard",
     classifiers=[
         'Development Status :: 3 - Alpha',
         'Environment :: Web Environment',
         'Framework :: Flask',
         'Intended Audience :: System Administrators',
         'Natural Language :: English',
         'License :: OSI Approved :: Apache Software License',
         'Operating System :: POSIX',
         'Programming Language :: Python :: 2',
         'Programming Language :: Python :: 2.6',
         'Programming Language :: Python :: 2.7',
+        'Programming Language :: Python :: 3',
+        'Programming Language :: Python :: 3.2',
+        'Programming Language :: Python :: 3.3',
         ],
 )